<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: 'white',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">训练详情</view>
    </view>
    <!-- 主体 -->
    <view class="box" :style="{ marginTop: statusBarHeight + 'px' }">
      <view
        class="top"
        :style="'background-image:url(' + detail.bg_img_url + ')'"
      >
        <view class="ranking" @click="goPage">
          <view class="ranking_item">
            <image
              src="@/static/images/icon_xly_paihangbang.png"
              mode=""
            ></image>
            <view class="ranking_item_text">排行榜</view>
          </view>
        </view>
        <view class="top_text">{{ detail.title }}</view>
        <view class="top_num">{{ detail.total_people }}人参与</view>
      </view>
      <view class="main">
        <view class="main_title">活动介绍</view>
        <view class="main_text" v-html="detail.content">
          <!-- {{ detail.content }} -->
        </view>
        <view class="hide_box" v-if="!detail.is_kan">
          <view class="hide_box_text" @click="showLimit = true">
            开通该等级会员后解锁全部内容
            <u-icon
              name="arrow-right"
              color="#444444"
              size="15"
              class="hide_icon"
            ></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="btn_box">
      <view class="btn" @click="participate">
        {{ detail.zhuangtai == '已结束'?'已结束':detail.is_add == 1 ? btnStr2 : btnStr1 }}
      </view>
    </view>
    <!-- 参与弹框 -->
    <u-modal
      :show="showMod"
      :title="modTitle"
      width="540rpx"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @cancel="showMod = false"
      @close="showMod = false"
    >
      <view class="slot-content"> 是否确认参与该打卡活动？ </view>
    </u-modal>
    <!-- 权限弹框 -->
    <u-modal
      :show="showLimit"
      :title="limitTitle"
      width="540rpx"
      confirmText="去开通"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="limitConfirm"
      @cancel="showLimit = false"
      @close="showLimit = false"
    >
      <view class="slot-content"> 您还不是该等级会员，请升级后再试？ </view>
    </u-modal>
	<floatingBall></floatingBall>
  </view>
</template>

<script>
import collect from "@/components/collect.vue"; // 收藏、
import progressBar from "@/pages/components/progress_bar.vue"; //录音
export default {
  components: {
    collect,
    progressBar,
  },

  data() {
    return {
      title: "",
      statusBarHeight: 0,
      height: 0,
      showMod: false,
      showLimit: false,
      modTitle: "确认参与",
      limitTitle: "权限提示",
      btnStr1: "参与打卡",
      btnStr2: "已参与，前往打卡",
      showHide: true,
      detail: {},
      currentId: "",
      id: "",
    };
  },
  onLoad(options) {
    this.currentId = options.currentId;
    this.id = options.id;
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    this.getDetaol();
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    confirm() {
      // uni.$u.toast("确定啦");

      // uni.navigateTo({
      //   url: "/pages/training/clock",
      // });
      this.goCanJia();
    },
    limitConfirm() {
      uni.$u.toast("开通啦");
      this.showLimit = false;
    },
    goPage() {
      uni.navigateTo({
        url: `/pages/training/ranking?detail=${JSON.stringify(this.detail)}`,
      });
    },
    // 获取详情
    getDetaol() {
      this.$http
        .xunlianyingDetail({ id: this.id || this.currentId })
        .then((res) => {
          this.detail = res.data.detail;
          console.log(this.detail, "训练营详情");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 参加训练
    goCanJia() {
      this.$http
        .xunlianyingCanjia({ id: this.id || this.currentId })
        .then((res) => {
          // this.detail = res.data.detail;
          this.showMod = false;
          console.log(res, "参加训练");
          uni.$u.toast(res.message);
          setTimeout(() => {
            this.getDetaol();
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 参与
    participate() {
      if(this.detail.zhuangtai == '已结束'){
        uni.$u.toast('该训练营已结束');
        return
      }
      console.log(this.detail);
      if (this.detail.is_add) {
        // 跳打卡详情页面
        uni.navigateTo({
          url: `/pages/training/clockDetail?id=${this.id || this.currentId}`,
        });
      } else {
        this.showMod = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  padding: 0 30rpx;
  position: relative;
  .top {
    width: 100%;
    height: 345rpx;
    border-radius: 16rpx;
    // background-image:url("@/static/images/pic_wddc_neirong_tu.png") ;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 32rpx;
    box-sizing: border-box;
    .ranking {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .ranking_item {
        width: 166rpx;
        height: 56rpx;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 30rpx;
          height: 30rpx;
        }
        .ranking_item_text {
          font-size: 26rpx;
          color: #ffffff;
          margin-left: 10rpx;
        }
      }
    }
    .top_text {
      font-size: 36rpx;
      color: #ffffff;
      margin-top: 133rpx;

      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }
    .top_num {
      font-size: 28rpx;
      color: #888888;
      margin-top: 16rpx;
    }
  }
  .main {
    margin-top: 130rpx;
    position: relative;
    .main_title {
      font-size: 32rpx;
      color: #444444;
    }
    .main_text {
      font-size: 28rpx;
      color: #444444;
      margin-top: 24rpx;
    }
    .hide_box {
      width: 100%;
      height: 839rpx;
      background: linear-gradient(
        360deg,
        #ffffff 87%,
        rgba(255, 255, 255, 0) 100%
      );
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      position: absolute;
      top: 150rpx;
      left: 0;
      .hide_box_text {
        font-size: 30rpx;
        color: #444444;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 100rpx;
        .hide_icon {
          position: relative;
          top: 3rpx;
        }
      }
    }
  }
}

.btn_box {
  width: 100%;
  height: 128rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 16rpx 30rpx;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  .btn {
    height: 96rpx;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>